<template>
  <div class="team">
    <div class="team_card">
      <h3>团队成员</h3>
      <div>
        <span>队长： </span>
        <div @click="lookStusentInf(team.cap_id)" class="click">
          <img src="../../assets/img/logo.png" alt="" />
          <span>{{ team.cap }}</span>
        </div>
        <span>队员：</span>
        <div
          v-for="(member, i) in team.t_member"
          :key="i"
          @click="lookStusentInf(member.s_id)"
          class="click"
        >
          <img src="../../assets/img/logo.png" alt="" />
          <span>{{ member.s_name }}</span>
        </div>
      </div>
    </div>
    <div>
      <h3>团队公告</h3>
      <p class="team_notice">
        <i class="el-icon-message-solid">:</i>{{ team.notice }}
      </p>
    </div>
    <div>
      <h3>项目名称：{{ project.p_title }}</h3>
      <ul class="project_mes">
        <li>指导老师：{{ project.t_name }}</li>
        <li>项目难度：{{ project.p_dif }}</li>
        <li>所需人数：{{ project.p_peopleNum }}</li>
        <li>项目周期：{{ project.p_time }}</li>
      </ul>
      <h3>项目简介：</h3>
      <p class="project_synopsis">{{ project.p_synopsis }}</p>
      <h3>项目要求：</h3>
      <p
        class="project_require"
        v-for="(require, i) in project.p_require"
        :key="i"
      >
        ({{ i + 1 }}){{ require }}
      </p>
      <div class="project_btn">
        <el-button type="success" @click="joinTeam(team_id)"
          >加入队伍</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      team: {},
      project: {},
      team_id: 0,
      p_id: 0,
    };
  },
  mounted() {
    this.team_id = this.$route.query.team_id;
    this.p_id = this.$route.query.p_id;
    this.getTemeParticulars();
  },
  methods: {
    joinTeam(id) {
      var token = localStorage.getItem("token");
      var s_id = token.substring(1, token.length - 1).split("#")[1] * 1;
      axios
        .post(`http://localhost:3000/student/joinTeam`, { s_id, team_id: id })
        .then((ret) => {
          if (ret.data.code == 1) {
            this.$message({
              showClose: true,
              message: "申请已发送！等待队长处理",
              type: "success",
            });
          } else if (ret.data.code == 3) {
            this.$message({
              showClose: true,
              message: "你已存在改队伍中!!",
              type: "error",
            });
          } else if (ret.data.code == 4) {
            this.$message({
              showClose: true,
              message: "你已提交过申请等待审批!!",
              type: "error",
            });
          } else {
            this.$message({
              showClose: true,
              message: "你不能同时加入多支队伍",
              type: "error",
            });
          }
        });
    },
    getTemeParticulars() {
      axios
        .post(`http://localhost:3000/student/getTemeParticulars`, {
          p_id: this.p_id,
          team_id: this.team_id,
        })
        .then((ret) => {
          ret.data.project.p_require = ret.data.project.p_require.split("//");
          this.project = ret.data.project;
          this.team = ret.data.team;
        });
    },
  },
};
</script>

<style scoped>
.team {
  width: 90%;
  margin: 20px auto;
}
.team > div {
  margin-bottom: 20px;
  box-sizing: border-box;
  padding: 10px 20px;
  border-radius: 20px;
  border: 1px solid #ddd;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  border-left: 2px solid rgba(255, 255, 255, 0.5);
  border-top: 2px solid rgba(255, 255, 255, 0.5);
}
.team > div h3 {
  font: 18px/40px "";
  font-weight: 700;
  color: #303133;
}
.team_card {
  border-radius: 10px;
  padding: 0 10px;
}
.team_card img {
  background-color: #fff;
}
.team_card > h4 {
  height: 24px;
  font-weight: 700;
  font: 18px/24px "";
}
.team_card > div {
  margin-top: 5px;
  height: 60px;
  display: flex;
  align-items: center;
}
.team_card > div > span {
  font-size: 18px;
  display: inline-block;
}
.team_card > div > div {
  display: inline-block;
  margin: 0 20px;
}
.team_notice {
  font: 18px/30px "";
  margin: 20px;
}
.team_notice > i {
  padding: 0 10px;
  color: #f56c6c;
}
.project_mes {
  width: 50%;
  display: flex;
  flex-wrap: wrap;
}
.project_mes > li {
  width: 50%;
  padding: 10px 20px;
  box-sizing: border-box;
}
.project_synopsis {
  padding: 10px 20px;
  text-indent: 2em;
  line-height: 26px;
}
.project_require {
  padding: 10px 20px;
  text-indent: 2em;
  line-height: 26px;
}
.project_btn {
  text-align: right;
}
img {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #ddd;
}
</style>
